<template>
  <div id="pdfDom">
    <div class="reportRecord" id="printMe">
      <TopHeader></TopHeader>
      <div class="mainTitle">
        <div class="container headArea">
          <div class="titleArea">
            <div class="name">综合测试报告</div>
            <div class="createTime">生成时间 {{ reportCreateTime }}</div>
          </div>
          <div class="btnArea">
            <div class="btnItem" v-print="'#printMe'">
              <img src="../assets/icon_print.png" alt="">
              <span>打印</span>
            </div>
            <!-- <div class="btnItem" @click="getPdf()">
              <img src="../assets/icon_save.png" alt="">
              <span>保存</span>
            </div> -->
          </div>
        </div>
      </div>
      <div class="container topReportArea">
        <div class="topModel">
          <div class="topTitleBlock">
            <div class="name">测评人信息</div>
            <img src="../assets/pic_info.png" alt="">
          </div>
          <div class="userMsgArea">
            <div class="users">
              <div class="singleMsg">
                <div class="title">姓名</div>
                <div class="content">{{ userMsg.name }}</div>
              </div>
              <div class="singleMsg">
                <div class="title">年级</div>
                <div class="content">{{ userMsg.grade }}</div>
              </div>
              <div class="singleMsg">
                <div class="title">学号</div>
                <div class="content">{{ userMsg.no !== '' ? userMsg.no : '暂无' }}</div>
              </div>
              <div class="singleMsg">
                <div class="title">性别</div>
                <div class="content">{{ userMsg.gender == 1 ? '男' : '女' }}</div>
              </div>
              <div class="singleMsg">
                <div class="title">班级</div>
                <div class="content">{{ userMsg.class_name }}</div>
              </div>
            </div>
            <div class="remark">
              <div class="title">备注</div>
              <div class="content">{{ userMsg.remark !== '' ? userMsg.remark : '暂无' }}</div>
            </div>
          </div>
        </div>
        <div class="topModel">
          <div class="topTitleBlock">
            <div class="name">五维生涯测评记录</div>
            <img src="../assets/pic_programe.png" alt="">
          </div>
          <div class="fiveTestRecord">
            <div class="singleTest">
              <div class="leftImage"><img src="../assets/icon_chengzhang_30.png" alt=""></div>
              <div class="rightContent">
                <div class="top">
                  <div class="testName">成长环境</div>
                  <div class="moreResult" v-show="growupList.length > 1">多结果</div>
                </div>
                <div class="bottom">{{ growupList[0] }}</div>
              </div>
            </div>
            <div class="singleTest">
              <div class="leftImage"><img src="../assets/icon_duoyuan_30.png" alt=""></div>
              <div class="rightContent">
                <div class="top">
                  <div class="testName">多元智能</div>
                  <div class="moreResult" v-show="zhinengList.length > 1">多结果</div>
                </div>
                <div class="bottom">{{ zhinengList[0] }}</div>
              </div>
            </div>
            <div class="singleTest">
              <div class="leftImage"><img src="../assets/icon_mbti_30.png" alt=""></div>
              <div class="rightContent">
                <div class="top">
                  <div class="testName">MBTI</div>
                  <div class="moreResult" v-show="mbtiList.length > 1">多结果</div>
                </div>
                <div class="bottom">{{ mbtiList[0] }}</div>
              </div>
            </div>
            <div class="singleTest">
              <div class="leftImage"><img src="../assets/icon_jiazhiguan_30.png" alt=""></div>
              <div class="rightContent">
                <div class="top">
                  <div class="testName">职业价值观</div>
                  <div class="moreResult" v-show="valuesList.length > 1">多结果</div>
                </div>
                <div class="bottom">{{ valuesList[0] }}</div>
              </div>
            </div>
            <div class="singleTest">
              <div class="leftImage"><img src="../assets/icon_zhiyexingqu_30.png" alt=""></div>
              <div class="rightContent">
                <div class="top">
                  <div class="testName">职业兴趣</div>
                  <div class="moreResult" v-show="interestList.length > 1">多结果</div>
                </div>
                <div class="bottom">{{ interestList[0] }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="topModel">
          <div class="topTitleBlock">
            <div class="name">典型职行业</div>
            <img src="../assets/pic_work.png" alt="">
          </div>
          <div class="modelContent">官员、会计师、企业管理者、秘书、人事经理、临床心理学、社会工作、咨询辅导和营销职业等。</div>
        </div> -->
        <div class="topModel">
          <div class="topTitleBlock">
            <div class="name">专家建议</div>
            <img src="../assets/pic_advice.png" alt="">
          </div>
          <div class="modelContent">
            <div v-for="(item, index) of suggests" :key="index">{{ (index + 1) + '、' + item }}</div>
          </div>
        </div>
      </div>
      <div class="bottomReportArea">
        <div class="container">
          <div class="recommendArea">
            <div class="topTitleArea">
              <div class="title">推荐专业综合结果 ({{ majorResultList.length }})</div>
              <div class="watchMore" @click="handleWatchAllResult('major')">查看全部结果</div>
            </div>
            <div class="rankArea">
              <div class="topThree">
                <div v-for="(item, index) of majorTopThree" :key="index" class="topRankItem" @click="handleIntoMajorDetail(item.major)">
                  <div class="leftName">
                    <div class="rank"><i>NO.{{ index + 1 }}</i></div>
                    <div class="name">{{ item.major }}</div>
                  </div>
                  <div class="rightScore">{{ item.score }}</div>
                </div>
              </div>
              <div class="otherRank">
                <div class="otherShowRankList" v-for="(item, index) of majorShowList" :key="index">
                  <div class="otherItem" v-for="(m, n) of item" :key="n" @click="handleIntoMajorDetail(m.major)">
                    <div class="leftRank">
                      <div class="rank">{{ index == 0 ? n + 4 : ( index == 1 ? n + 9 : n + 14) }}</div>
                      <div class="name">{{ m.major }}</div>
                    </div>
                    <div class="rightShowScore">{{ m.score }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="recommendArea">
            <div class="topTitleArea">
              <div class="title">推荐职行业结果 ({{ jobResultList.length }})</div>
              <div class="watchMore" @click="handleWatchAllResult('trade')">查看全部结果</div>
            </div>
            <div class="rankArea">
              <div class="topThree">
                <div v-for="(item, index) of jobTopThree" :key="index" class="topRankItem" @click="handleIntoTradeDetail(item.profession_type)">
                  <div class="leftName">
                    <div class="rank"><i>NO.{{ index + 1 }}</i></div>
                    <div class="name">{{ item.profession_type }}</div>
                  </div>
                  <div class="rightScore">{{ item.score }}</div>
                </div>
              </div>
              <div class="otherRank">
                <div class="otherShowRankList" v-for="(item, index) of jobShowList" :key="index">
                  <div class="otherItem" v-for="(m, n) of item" :key="n" @click="handleIntoTradeDetail(m.profession_type)">
                    <div class="leftRank">
                      <div class="rank">{{ index == 0 ? n + 4 : ( index == 1 ? n + 9 : n + 14) }}</div>
                      <div class="name">{{ m.profession_type }}</div>
                    </div>
                    <div class="rightShowScore">{{ m.score }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 全部结果 -->
      <el-dialog
        class="allListDialog"
        :title="allResultTitle"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="allResultDialog"
      >
        <div class="allResultList">
          <div class="allResultItem" v-for="(item, index) of allResultList" :key="index" @click="handleClickIntoSinglePage(item)">
            <div class="left">
              <div :class="['rank', index < 3 ? 'rankTopThree' : '']">{{ index + 1 }}</div>
              <div class="name">{{ choAllResultType == 'major' ? item.major : item.profession_type }}</div>
            </div>
            <div class="right">{{ item.score }}</div>
          </div>
        </div>
      </el-dialog>

      <!-- 专业类详情 -->
      <el-dialog
        class="majorDialog"
        title="专业类详情"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="majorDialog"
      >
        <div class="majorDetailArea">
          <div class="majorHeaderArea">
            <div class="majorName">{{ catalogName }}</div>
            <div class="majorCode">专业代码  {{ catalogCode }}</div>
          </div>
          <div class="bottomContentArea">
            <div class="leftChoMajorTab">
              <div v-for="(item, index) of majorList" :key="index" :class="['tabItem', choMajorIndex == index ? 'hasChoMajorTab' : '']" @click="handleChoMajorItem(item, index)">{{ item.major_name }}</div>
            </div>
            <div class="rightMajorDetail">
              <div class="singleBlock" v-show="majorLabelList.length > 0">
                <div class="blockTitle">
                  <img src="../assets/icon_ zyl_diyiyingxiang.png" alt="">
                  <div class="titleName">第一印象</div>
                </div>
                <div class="hasBackgroundList">
                  <div v-for="(item, index) of majorLabelList" :key="index" class="backItem">{{ item }}</div>
                </div>
              </div> 
              <div class="singleBlock" v-show="majorIntroDuce !== ''">
                <div class="blockTitle">
                  <img src="../assets/icon_ zyl_zhuanyejieshao.png" alt="">
                  <div class="titleName">专业介绍</div>
                </div>
                <div class="textContent">{{ majorIntroDuce }}</div>
              </div> 
              <!-- <div class="singleBlock" v-show="majorCollege !== ''">
                <div class="blockTitle">
                  <img src="../assets/icon_ zyl_duiyingxueyuan.png" alt="">
                  <div class="titleName">对应院系</div>
                </div>
                <div class="textContent">{{ majorCollege }}</div>
              </div>  -->
              <div class="singleBlock" v-show="majorHeXinCourse.length > 0">
                <div class="blockTitle">
                  <img src="../assets/icon_ zyl_hexinkecheng.png" alt="">
                  <div class="titleName">专业核心课程</div>
                </div>
                <div class="hasPointList">
                  <div v-for="(item, index) of majorHeXinCourse" :key="index" :title="item" class="pointItem">
                    {{ item.length > 24 ? item.slice(0, 23) + '...' : item }}
                  </div>
                </div>
              </div> 
              <!-- <div class="singleBlock" v-show="aboutKills.length > 0">
                <div class="blockTitle">
                  <img src="../assets/icon_ zyl_xiangguanjineng.png" alt="">
                  <div class="titleName">相关技能</div>
                </div>
                <div class="hasPointList">
                  <div v-for="(item, index) of aboutKills" :key="index" class="pointItem">
                    {{ item }}
                  </div>
                </div>
              </div>  -->
              <div class="singleBlock" v-show="aboutMajors.length > 0">
                <div class="blockTitle">
                  <img src="../assets/icon_ zyl_xiangguanzhuanye.png" alt="">
                  <div class="titleName">相关专业</div>
                </div>
                <div class="hasPointList">
                  <div v-for="(item, index) of aboutMajors" :key="index" class="pointItem">
                    {{ item }}
                  </div>
                </div>
              </div>
              
            </div>
          </div>
        </div>
      </el-dialog>


      <!-- 行业类详情 -->
      <el-dialog
        class="tradeDialog"
        title="职行业详情"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="tradeDialog"
      >
        <div class="tradeDetailArea">
          <div class="tradeHeaderArea">
            <div class="jobName">{{ tradeName }}</div>
          </div>
          <div class="bottomContentArea">
            <div class="leftChoMajorTab">
              <div v-for="(item, index) of tradeList" :key="index" :class="['tabItem', choTradeIndex == index ? 'hasChoJobTab' : '']" @click="handleChoTradeItem(item, index)">{{ item.title }}</div>
            </div>
            <div class="contentDetail">
              <div class="jobNeedMajor">
                <div class="jobName">{{ choJobName }}</div>
                <div class="needMajor">{{ tradeAboutMajor }}</div>
              </div>
              <div class="singleBlock">
                <div class="blockTitle">
                  <img src="../assets/icon_zhy_zhiweimiaoshu.png" alt="">
                  <div class="titleName">职位描述（基础）</div>
                </div>
                <div class="blockContent">
                  <div class="describe">
                    <div class="describeTitle">岗位职责</div>
                    <div class="describeContent" v-html="obligation"></div>
                  </div>
                </div>
                <div class="blockContent">
                  <div class="describe">
                    <div class="describeTitle">岗位要求</div>
                    <div class="describeContent" v-html="demand"></div>
                  </div>
                </div>
              </div>
              <div class="singleBlock" v-show="promote !== ''">
                <div class="blockTitle">
                  <img src="../assets/icon_zhy_jinshengqudao.png" alt="">
                  <div class="titleName">晋升通道</div>
                </div>
                <div class="textContent">{{ promote }}</div>
              </div>  
              <div class="singleBlock" v-show="tradeStatus !== ''">
                <div class="blockTitle">
                  <img src="../assets/icon_zhy_zhiyezige.png" alt="">
                  <div class="titleName">执业资格</div>
                </div>
                <div class="textContent">{{ tradeStatus }}</div>
              </div>  
            </div>
          </div>
        </div>
      </el-dialog>

    </div>
  </div>

</template>

<script>
import Vue from 'vue'
import Print from 'vue-print-nb';
Vue.use(Print);

import ls from "store2";
import axios from '~/plugins/axios'
import TopHeader from '~/components/topHeader'
import { Message, Loading } from 'element-ui';
export default {
  name: 'reportRecord',
  components: {
    TopHeader,
  },
  data() {
    return {
      loading: null,
      majorLoading: null,
      tradeLoading: null,
      reportCreateTime: '',
      htmlTitle: '学生个人生涯测评',
      userMsg: {
        name: '',
        grade: '',
        class_name: '',
        no: '',
        gender: 0,
        remark: '',
      },
      majorResultList: [], // 专业列表
      majorTopThree: [],
      majorShowList: [],

      jobResultList: [], // 职位列表
      jobTopThree: [],
      jobShowList: [],

      allResultDialog: false, // 全部结果弹出框
      allResultTitle: '', // 全部结果---标题
      allResultList: [], // 全部结果列表

      majorDialog: false, // 专业类详情弹出框
      tradeDialog: false, // 行业类详情弹出框

      loading: null,
      growupList: [],
      zhinengList: [],
      mbtiList: [],
      valuesList: [],
      interestList: [],
      suggests: [],

      majorList: [], // 专业列表
      catalogName: '', // 专业类名称
      catalogCode: '', // 专业类代码
      choMajorIndex: 0, // 选中的专业下标
      majorIntroDuce: '', // 专业介绍
      majorLabelList: [], // 第一印象
      majorCollege: '', // 对应院校
      majorHeXinCourse: [], // 专业核心课程
      aboutMajors: [], // 相关专业
      aboutKills: [], // 相关技能

      tradeList: [], // 行业列表
      tradeName: '', // 行业名称
      choTradeIndex: 0, // 选中的行业下标
      obligation: '', // 岗位职责
      demand: '', // 岗位要求
      promote: '', // 晋升通道
      tradeAboutMajor: '', // 相关专业
      tradeStatus: '', // 执业资格
      choJobName: '', // 选中的职位名称

    }
  },
  mounted() {
    this.loading = Loading.service({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getTotalTestResult()
  },
  methods: {
    // 切换专业
    handleChoMajorItem(item, index) {
      this.choMajorIndex = index
      this.majorLoading = Loading.service({ fullscreen: true })
      this.handleWatchMajorDetail(item.major_code)
    },
    // 查看专业类详情
    handleIntoMajorDetail(data) {
      this.catalogName = data
      this.majorDialog = true
      this.majorLoading = Loading.service({ fullscreen: true })
      this.getMajorList(data)
    },
    // 获取专业列表
    getMajorList(item) {
      // this.majorLoading = Loading.service({ fullscreen: true })
      axios.get('/major', { major: item }).then(res => {
        if (res.catalog.code !== '') {
          this.catalogCode = res.catalog.code
          this.majorList = res.majors
          this.choMajorIndex = 0
          const data = res.majors ? res.majors[0] : []
          this.handleWatchMajorDetail(data.major_code)
        } else {
          this.majorLoading.close()
          this.majorDialog = false
          Message.error('该专业类没有数据');
        }
      })
    },
    // 获取专业详情
    handleWatchMajorDetail(item) {
      axios.get('/major-detail', { major_code: item }).then(res => {
        this.majorIntroDuce = res.introduction
        this.majorLabelList = res.label !== '' ? res.label.split(',') : []
        this.majorCollege = res.rel_colleges
        this.majorHeXinCourse = res.rel_classes !== '' ? res.rel_classes.split('、') : []
        this.aboutMajors = res.rel_majors !== '' ? res.rel_majors.split(',') : []
        this.aboutKills = res.rel_skills !== '' ? res.rel_skills.split(',') : []
      }).finally(() => {
        this.majorLoading.close()
      })
    },

    // 切换行业
    handleChoTradeItem(item, index) {
      this.choTradeIndex = index
      this.choJobName = item.title
      this.tradeLoading = Loading.service({ fullscreen: true })
      this.handleWatchTradeDetail(item.id)
    },
    // 查看行业类详情
    handleIntoTradeDetail(data) {
      this.tradeName = data
      this.tradeDialog = true
      this.getTradeList(data)
    },
    // 获取行业列表
    getTradeList(item) {
      this.tradeLoading = Loading.service({ fullscreen: true })
      axios.get('/position', { position: item }).then(res => {
        if (res.length > 0) {
          this.tradeList = res
          this.choTradeIndex = 0
          const data = res ? res[0] : []
          this.choJobName = data.title
          this.handleWatchTradeDetail(data.id)
        } else {
          this.tradeLoading.close()
          this.tradeDialog = false
          Message.error('该专业类没有数据');
        }
      })
    },
    // 获取行业详情
    handleWatchTradeDetail(item) {
      axios.get('/position/' + item).then(res => {
        this.obligation = res.obligation
        this.demand = res.demand
        this.promote = res.promote
        this.tradeAboutMajor = res.major
        this.tradeStatus = res.status
      }).finally(() => {
        this.tradeLoading.close()
      })
    },
    
    // 全部结果中查看行业或专业的详情
    handleClickIntoSinglePage(data) {
      if (this.choAllResultType == 'major') {
        this.handleIntoMajorDetail(data.major)
      } else {
        this.handleIntoTradeDetail(data.profession_type)
      }
    },
    // 查看全部结果
    handleWatchAllResult(type) {
      this.allResultDialog = true
      this.choAllResultType = type
      if (type == 'major') {
        this.allResultTitle = '推荐专业综合结果 (' + this.majorResultList.length +')'
        this.allResultList = this.majorResultList
      } else {
        this.allResultTitle = '推荐职行业结果 (' + this.jobResultList.length +')'
        this.allResultList = this.jobResultList
      }
    },
    // 获取专业排行列表
    getMajorRankList() {
      let arr1 = []
      let arr2 = []
      let arr3 = []
      for (let i = 0; i < 18; i += 1) {
        if (i < 3) {
          this.majorTopThree.push(this.majorResultList[i])
        } else if (i < 8) {
          arr1.push(this.majorResultList[i])
        } else if (i < 13) {
          arr2.push(this.majorResultList[i])
        } else if (i < 18) {
          arr3.push(this.majorResultList[i])
        } 
      }
      this.majorShowList[0] = arr1
      this.majorShowList[1] = arr2
      this.majorShowList[2] = arr3
    },
    // 获取职位排行列表
    getJobsRankList() {
      let arr1 = []
      let arr2 = []
      let arr3 = []
      for (let i = 0; i < 18; i += 1) {
        if (i < 3) {
          this.jobTopThree.push(this.jobResultList[i])
        } else if (i < 8) {
          arr1.push(this.jobResultList[i])
        } else if (i < 13) {
          arr2.push(this.jobResultList[i])
        } else if (i < 18) {
          arr3.push(this.jobResultList[i])
        } 
      }
      this.jobShowList[0] = arr1
      this.jobShowList[1] = arr2
      this.jobShowList[2] = arr3
    },
    // 获取综合测评结果
    getTotalTestResult() {
      axios.get('/programme').then(res => {
        // 用户信息
        this.userMsg.name = res.name
        this.userMsg.grade = res.grade
        this.userMsg.class_name = res.class_name
        this.userMsg.no = res.no
        this.userMsg.remark = res.remark
        this.userMsg.gender = res.gender

        // 创建时间
        this.reportCreateTime = res.generated_at

        // 五维生涯测评记录
        this.growupList = res.grown.split('+')
        this.zhinengList = res.intelligence.split('+')
        this.mbtiList = res.character.split('+')
        this.valuesList = res.worth.split('+')
        this.interestList = res.interest.split('+')

        // 专家建议
        this.suggests = res.suggests

        // 专业列表
        this.majorResultList = res.majors
        this.getMajorRankList()

        // 专业列表
        this.jobResultList = res.professions
        this.getJobsRankList()


      }).finally(() => {
        setTimeout(() => {
          this.loading.close()
        }, 1000)
      })
    },
  }
}
</script>

<style lang="less" scoped>
  @defaultColor: #1C2227;
  .reportRecord {
    padding-bottom: 100px;
    background: #fff;
    .mainTitle {
      width: 100%;
      height: 120px;
      border: 2px solid rgba(204,204,204,0.3);
      .headArea {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .titleArea {
          .name {
            color: @defaultColor;
            font-size: 24px;
            margin-bottom: 12px;
            font-weight: bold;
          }
          .createTime {
            color: #6F7880;
            font-size: 14px;
          }
        }
        .btnArea {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .btnItem {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 24px;
            cursor: pointer;
            img {
              width: 24px;
              height: 24px;
              margin-right: 8px;
            }
            span {
              color: #6F7880;
              font-size: 14px;
            }
          }
        }
      }
    }
    .topReportArea {
      padding-top: 40px;
      .topModel {
        margin-bottom: 57px;
        .topTitleBlock {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-bottom: 16px;
          border-bottom: 1px solid #E5E8ED;
          margin-bottom: 32px;
          .name {
            color: @defaultColor;
            font-size: 18px;
            font-weight: bold;
            margin-right: 6px;
          }
          img {
            height: 13px;
          }
        }
        .topTitleBlock::before {
          content: '';
          width: 4px;
          height: 16px;
          background: #FF8A00;
          margin-right: 12px;
        }
        .userMsgArea {
          .users {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-items: center;
            .singleMsg {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 33%;
              margin-bottom: 24px;
              .title {
                color: #6F7880;
                font-size: 14px;
                margin-right: 32px;
                line-height: 19px;
              }
              .content {
                color: @defaultColor;
                font-size: 14px;
                line-height: 19px;
              }
            }
          }
          .remark {
            // display: flex;
            // justify-content: flex-start;
            display: -webkit-box;
            .title {
              color: #6F7880;
              font-size: 14px;
              margin-right: 32px;
              line-height: 19px;
            }
            .content {
              color: @defaultColor;
              font-size: 14px;
              line-height: 19px;
            }
          }
        }
        .fiveTestRecord {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .singleTest {
            width: 214px;
            height: 104px;
            background: #fff;
            border: 1px solid rgba(53,59,64,0.1);
            border-radius: 10px;
            padding: 25px 19px;
            display: flex;
            justify-content: flex-start;
            .leftImage {
              width: 30px;
              height: 30px;
              margin-right: 21px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .rightContent {
              .top {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 8px;
                .testName {
                  color: #6F7880;
                  font-size: 14px;
                  line-height: 21px;
                }
                .moreResult {
                  margin-left: 10px;
                  color: #B8BCBF;
                  font-size: 12px;
                  line-height: 21px;
                }
              }
              .bottom {
                color: #353B40;
                font-size: 16px;
                line-height: 22px;
                font-weight: bold;
              }
            }
          }
        }
        .modelContent {
          color: @defaultColor;
          font-size: 14px;
          line-height: 26px;
        }
      }
      
    }
    .bottomReportArea {
      background: #FAFAFC;
      width: 100%;
      padding: 56px 0 100px;
      .recommendArea {
        margin-bottom: 56px;
        .topTitleArea {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 25px;
          .title {
            color: @defaultColor;
            font-size: 18px;
            line-height: 28px;
            font-weight: bold;
          }
          .title::before {
            content: '';
            width: 4px;
            height: 16px;
            background: #FF8A00;
          }
          .watchMore {
            color: #6F7880;
            font-size: 14px;
            line-height: 28px;
            cursor: pointer;
          }
        }
        .rankArea {
          width: 100%;
          height: 362px;
          background: #fff;
          border: 1px solid #E5E8ED;
          padding: 32px 30px 32px 32px;
          .topThree {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            .topRankItem {
              width: 358px;
              height: 80px;
              background: #FAFAFC;
              border-radius: 10px;
              padding: 30px 24px;
              cursor: pointer;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .leftName {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .rank {
                  margin-right: 16px;
                  i {
                    color: #FF8A00;
                    font-size: 18px;
                    font-weight: bold;
                  }
                }
                .name {
                  color: @defaultColor;
                  font-size: 16px;
                  font-weight: bold;
                }
              }
              .rightScore {
                color: @defaultColor;
                font-size: 18px;
                font-weight: bold;
              }
            }
          }
          .otherRank {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .otherShowRankList {
              .otherItem {
                width: 358px;
                height: 26px;
                margin-bottom: 16px;
                padding: 0 24px;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .leftRank {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .rank {
                    color: #B8BCBF;
                    font-size: 14px;
                    width: 20px;
                    margin-right: 24px;
                  }
                  .name {
                    color: #282828;
                    font-size: 14px;
                  }
                }
                .rightShowScore {
                  color: #282828;
                  font-size: 14px;
                }
              }
              .otherItem:hover {
                .leftRank .name { color: #FF8A00; }
              }
            }
          }
        }
      }
      
    }
    .allResultList {
      padding: 24px 96px 24px 88px;
      .allResultItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 26px;
        margin-bottom: 16px;
        cursor: pointer;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .rank {
            color: #B8BCBF;
            font-size: 16px;
            margin-right: 24px;
          }
          .rankTopThree { 
            color: #FF8A00;
            font-weight: bold;
          }
          .name {
            color: #282828;
            font-size: 16px;
          }
        }
        .right {
          color: #282828;
          font-size: 16px;
        }
      }
    }
    .tradeDetailArea {
      padding: 24px 40px 40px 40px;
      .tradeHeaderArea {
        width: 100%;
        height: 108px;
        background:linear-gradient(90deg,rgba(247,247,250,0.2) 0%,rgba(247,247,250,1) 100%);
        padding: 43px 25px;
        margin-bottom: 19px;
        .jobName {
          color: @defaultColor;
          font-size: 18px;
          font-weight: bold;
          line-height: 22px;
          margin-bottom: 16px;
        }
      }
      .bottomContentArea {
        width: 100%;
        border: 1px solid #E5E8ED;
        border-radius: 2px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        .leftChoMajorTab {
          width: 240px;
          min-height: 1178px;
          background: #FAFAFC;
          border-left: 1px solid #E5E8ED;
          border-right: 1px solid #E5E8ED;
          .tabItem {
            width: 100%;
            height: 64px;
            padding: 21px 0 21px 24px;
            font-size: 14px;
            color: @defaultColor;
            border-right: 1px solid #E5E8ED;
            cursor: pointer;
          }
          .tabItem:first-child {
            border-top: 1px solid #E5E8ED;
          }
          .hasChoJobTab {
            background: #fff;
            color: #FF8A00;
            font-weight: bold;
          }
        }
        .contentDetail {
          width: 880px;
          padding: 40px;
          .jobNeedMajor {
            padding-bottom: 16px;
            border-bottom: 1px solid #E5E8ED;
            margin-bottom: 16px;
            .jobName {
              color: @defaultColor;
              font-size: 18px;
              line-height: 22px;
              font-weight: bold;
              margin-bottom: 8px;
            }
            .needMajor {
              color: #6F7880;
              font-size: 12px;
              line-height: 22px;
            }
          }
          .singleBlock {
            margin-bottom: 40px;
            .blockTitle {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 18px;
              img {
                width: 24px;
                height: 24px;
                margin-right: 8px;
              }
              .titleName {
                color: @defaultColor;
                font-size: 16px;
                font-weight: bold;
              }
            }
            .blockContent {
              padding-left: 33px;
              .describe {
                .describeTitle {
                  color: #6F7880;
                  font-size: 14px;
                  line-height: 19px;
                  margin-bottom: 16px;
                }
                .describeContent {
                  color: @defaultColor;
                  font-size: 14px;
                  line-height: 19px;
                }
              }
            }
            .blockContent:last-child { margin-top: 40px; }
            .textContent {
              padding-left: 33px;
              color: @defaultColor;
              font-size: 14px;
              line-height: 19px;
            }
          }
          .singleBlock:last-child { margin-bottom: 0; }
        }
      }  
    }
    .majorDetailArea {
      padding: 24px 40px 40px 40px;
      .majorHeaderArea {
        width: 100%;
        height: 108px;
        background:linear-gradient(90deg,rgba(247,247,250,0.2) 0%,rgba(247,247,250,1) 100%);
        padding: 24px;
        margin-bottom: 24px;
        .majorName {
          color: @defaultColor;
          font-size: 18px;
          line-height: 22px;
          margin-bottom: 16px;
        }
        .majorCode {
          color: #6F7880;
          font-size: 12px;
          line-height: 22px;
        }
      }
      .bottomContentArea {
        width: 100%;
        border: 1px solid #E5E8ED;
        border-radius: 2px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        .leftChoMajorTab {
          width: 240px;
          min-height: 1178px;
          background: #FAFAFC;
          border-left: 1px solid #E5E8ED;
          border-right: 1px solid #E5E8ED;
          .tabItem {
            width: 100%;
            height: 64px;
            padding: 21px 0 21px 24px;
            font-size: 14px;
            color: @defaultColor;
            border-right: 1px solid #E5E8ED;
            cursor: pointer;
          }
          .tabItem:first-child {
            border-top: 1px solid #E5E8ED;
          }
          .hasChoMajorTab {
            background: #fff;
            color: #FF8A00;
            font-weight: bold;
          }
        }
        .rightMajorDetail {
          width: 880px;
          padding: 40px;
          .singleBlock {
            margin-bottom: 40px;
            .blockTitle {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 18px;
              img {
                width: 24px;
                height: 24px;
                margin-right: 8px;
              }
              .titleName {
                color: @defaultColor;
                font-size: 16px;
                font-weight: bold;
              }
            }
            .hasBackgroundList {
              padding-left: 33px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .backItem {
                width: 90px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                border-radius: 2px;
                background: #F7F7FA;
                color: #6F7880;
                font-size: 14px;
                margin-right: 16px;
              }
            }
            .textContent {
              padding-left: 33px;
              color: @defaultColor;
              font-size: 14px;
              line-height: 19px;
            }
            .hasPointList {
              padding-left: 33px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-wrap: wrap;
              .pointItem {
                width: 366px;
                height: 38px;
                line-height: 38px;
                margin-bottom: 8px;
                color: @defaultColor;
                font-size: 14px;
                display: flex;
                align-items: center;
              }
              .pointItem::before {
                content: '';
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #D8D8D8;
                margin-right: 18px;
              }
            }
            
          }
          .singleBlock:last-child { margin-bottom: 0; }
        }
      }
    }
  }
</style>

<style lang="less">
  .allListDialog {
    .el-dialog {
      width: 640px;
    }
    .el-dialog__body {
      max-height: 752px;
      overflow-y: scroll;
      padding: 0;
    }
  }
  .tradeDialog {
    .el-dialog {
      width: 1200px;
    }
  }
  .majorDialog {
    .el-dialog {
      width: 1200px;
    }
  }
  .el-dialog__header {
    border-bottom: 1px solid #E5E8ED;
    padding: 14px 24px;
  }
  .el-dialog__title {
    color: #1C2227;
    font-size: 16px;
    font-weight: bold;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #B8BCBF;
  }
  .el-dialog__headerbtn {
    top: 15px;
  }
  
</style>
